<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<link rel="stylesheet/less" href='./index.less'>
	<script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.12.2/less.min.js"></script>
</head>

<body>
	<div class="color-box-list">
		<div class="color-box" onclick="changeColor(event)"></div>
		<div class="color-box" onclick="changeColor(event)"></div>
		<div class="color-box" onclick="changeColor(event)"></div>
		<div class="color-box" onclick="changeColor(event)"></div>
	</div>

	<script>
		function changeColor(event) {
			let colorBoxs = document.querySelectorAll('.color-box')

			if (event.target == colorBoxs[0]) {
				less.modifyVars({
					'@color': 'pink'
				});
			} else if (event.target == colorBoxs[1]) {
				less.modifyVars({
					'@color': 'yellowgreen'
				});
			} else if (event.target == colorBoxs[2]) {
				less.modifyVars({
					'@color': 'lightblue'
				});
			} else if (event.target == colorBoxs[3]) {
				less.modifyVars({
					'@color': 'lightsalmon'
				});
			}

			/* let a = document.getElementsByTagName("link");
			let aHref = a[0].getAttribute("href").slice(2, -5);
			a[0].parentElement.removeChild(a[0]);
			let b = document.createElement("link");
			b.setAttribute("rel", "stylesheet/less");
			if ("index" === aHref) {
				b.setAttribute("href", "./pink.less");
				less.modifyVars({
					'@color': 'pink'
				});
			} else {
				b.setAttribute("href", "./index.less");
				less.modifyVars({
					'@color': 'red'
				});
			}
			document.getElementsByTagName("head")[0].appendChild(b); */
		}
	</script>
</body>

</html>